@import '../../../core/index.less';
@import "./cropper.css";

.orin-w-imageeditor-root {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
    display: flex;

    .crop-wrapper {
        width: 320/@remScale;
        height: 320/@remScale;
        border: 1/@remScale solid @cut-line-color;
        position: relative;
        overflow: hidden;
        &.avatar {
            width: 300/@remScale;
            height: 300/@remScale;
            .cropper-container {
                .cropper-view-box, .cropper-move {
                    //border-radius: 50%;
                }
            }
        }
        //img {
        //    width: 100%;
        //    height: 100%;
        //}
        .image-load-before {
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: 1;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
    .preview {
        margin-left: 26/@remScale;
        position: relative;
        .nick-name-wrapper {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 1;
            background: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(98, 98, 98, 0)), to(rgba(0, 0, 0, 0.77)));
            color: @white;
            font-size: 12/@remScale;
            .text {
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                bottom: 15%;
            }
        }
        .avatar-preview {
            width: 100/@remScale;
            height: 100/@remScale;
            //border-radius: 50%;
            overflow: hidden;
            &.cover {
                width: 200/@remScale;
                height: 150/@remScale;
            }
        }

        .cover-preview {
            width: 200/@remScale;
            height: 150/@remScale;
            overflow: hidden;
        }
        .cover-name {
            height: 30/@remScale;
            width: 200/@remScale;
            background: @white;
            line-height: 30/@remScale;
            font-size: 12/@remScale;
            color: @black-three;
            padding: 0 10/@remScale;
        }
        .text-preview {
            text-align: center;
            font-size: 14/@remScale;
            margin-top: 10/@remScale;
            color: @black-auxiliary;
        }
    }

    .info-wrapper {
        flex: 1;
        margin-left: 20/@remScale;
        border: solid 1px @cut-line-color;
        padding: 0 20/@remScale;
        .item-info {
            margin-top: 15/@remScale;
            .info-title {
                font-size: 14/@remScale;
                color: @black-three;
            }
            .radio-list {
                margin-top: 13/@remScale;
                .radio {
                    width: 25%;
                    float: left;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-direction: column;
                    color: @black-auxiliary;
                    font-size: 12/@remScale;
                    cursor: pointer;
                    p {
                        margin-top: 9/@remScale;
                    }
                    &:nth-child(n+5) {
                        margin-top: 15/@remScale;
                    }
                    &.active {
                        color: @light-blue-color;
                    }
                }
                .clear-float {
                    clear: both;
                }
            }
            .rotate-list {
                margin-top: 13/@remScale;
                display: flex;

                align-items: center;
                justify-content: center;
                .rotate {
                    flex: 1;
                    position: relative;
                    text-align: center;
                    cursor: pointer;
                    color: @black-auxiliary;
                    &:hover {
                        .label-desc {
                            display: block;
                        }
                    }
                    .hoverColor(@black-auxiliary, @light-blue-color);
                    .label-desc {
                        display: none;
                        position: absolute;
                        border: solid 1/@remScale @border-color;
                        .boxShadow();
                        background-color: @white;
                        color: #666666;
                        padding: 2/@remScale;
                        font-size: 12/@remScale;
                        top: 30/@remScale;
                        right: -5/@remScale;
                    }
                }
            }
            .size-list {
                margin-top: 13/@remScale;
                display: flex;
                align-items: center;
                height: 36/@remScale;
                .label-class {
                    font-size: 14/@remScale;
                    color: @pinkish-grey;
                    margin-right: 6/@remScale;
                    width: auto;
                }
                .width-input {
                    width: 45%;
                    height: 36/@remScale;
                    margin-bottom: 0;
                    input {
                        width: 100%;
                    }
                    &:nth-child(2) {
                        margin-left: 20/@remScale;
                    }

                }
            }
        }
    }
    @media (max-width: @max1) {
        display: flex;
        flex-direction: column;
        //position: absolute;
        overflow-y: hidden;
        flex: 1;
        .crop-wrapper {
            width: 100%;
            flex: 1;
            &.avatar {
                width: 100%;
            }
        }

        .preview {
            display: none;
        }

        .info-wrapper {
            flex: 0 0 150/@remScale;
            margin-left: 0;
            border: none;
            padding: 0;
            .item-info {
                width: 100%;
                overflow-x: scroll;
                // -webkit-overflow-scrolling: touch;
                &::-webkit-scrollbar {
                    width: 0;
                    height: 0
                }
                &.px {
                    display: none;
                }
                .info-title {
                    display: none;
                }
                .radio-list {
                    width: 200%;
                    display: flex;
                    .radio {
                        flex: 1;
                        width: auto;
                        &:nth-child(n+5) {
                            margin-top: 0;
                        }
                    }
                }
            }
        }
    }
}